<!--
区域
 -->
<template>
  <div class="app-container paddingT50">
    <div class="paddingLR20 clearfix">
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <div class="fl">
            <el-button type="default" size="medium" @click="btnCancle">关闭</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <el-card shadow="never" class="border-radius-none margin-t2">
      <el-tree
        ref="tree"
        :data="treeData"
        :props="props"
        :node-key="treeNodeKey"
        :load="loadNode"
        lazy
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => addDialog(data)"
          >
            新增
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => updateDialog(node, data)"
          >
            修改
          </el-button>
        </span>
      </span>
      </el-tree>
    </el-card>
    <el-dialog :title="dialogEditTitle" :visible.sync="dialogEditVisible" :close-on-click-modal="false">
      <el-form ref="areaForm" :model="areaForm" label-width="80px">
        <el-form-item :label='`上级区域:`' prop='parentName'>
          <el-input v-model='areaForm.parentName' readonly/>
        </el-form-item>
        <el-form-item :label='`上级区域code:`' prop='parentCode' style="display: none">
          <el-input v-model='areaForm.parentCode' type="hidden"/>
        </el-form-item>
        <el-form-item :label='`区域名称:`' prop='name'>
          <el-input v-model='areaForm.name' maxlength="20" show-word-limit/>
        </el-form-item>
        <el-form-item :label='`区域简称:`' prop='shortName'>
          <el-input v-model='areaForm.shortName' maxlength="20" show-word-limit/>
        </el-form-item>
        <el-form-item :label='`行政代码:`' prop='areaCode'>
          <el-input v-model='areaForm.areaCode' maxlength="20" show-word-limit/>
        </el-form-item>
        <el-form-item :label='`区号:`' prop='cityCode'>
          <el-input v-model='areaForm.cityCode' maxlength="20" show-word-limit/>
        </el-form-item>
        <el-form-item :label='`邮政编码:`' prop='zipCode'>
          <el-input v-model='areaForm.zipCode' maxlength="20" show-word-limit/>
        </el-form-item>
        <el-form-item :label='`经度:`' prop='lng'>
          <el-input v-model='areaForm.lng' maxlength="20" show-word-limit/>
        </el-form-item>
        <el-form-item :label='`纬度:`' prop='lat'>
          <el-input v-model='areaForm.lat' maxlength="20" show-word-limit/>
        </el-form-item>
        <el-form-item :label='`备注:`' prop='remark'>
          <el-input v-model='areaForm.remark' maxlength="128" show-word-limit/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnSaveData">确定</el-button>
          <el-button @click="dialogEditVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import { getAccountType } from '@/api/enum/enum.js'
import { create, findById, getTree, update } from '../../../api/area/area'

export default {
  name: 'SysArea',
  components: {},
  mixins: [oftenuse],
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      props: {
        id: 'id',
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      treeData: [],
      defaultCheckedKeys: [],
      treeNodeKey: 'id',
      dialogEditTitle: '新增区域',
      dialogEditVisible: false,
      areaForm: {
        id: null,
        parentName: null,
        parentCode: null,
        name: null,
        shortName: null,
        areaCode: null,
        cityCode: null,
        zipCode: null,
        lng: null,
        lat: null,
        remark: null
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    // 页面初始化数据写在这里
    this.initData()
  },
  methods: {
    jump2list() {
      this.closeCurrentTag(this.$route)
      this.$router.push({
        name: 'sysAreaList',
        params: { refresh: true }
      })
    },
    btnCancle() {
      this.jump2list()
    },
    getAccountType(value) {
      const data = getAccountType()
      for (const option of data) {
        if (option.value === value) {
          return option.label
        }
      }
    },
    findById(id, parent) {
      findById({ id: id }).then(res => {
        if (res.data.flag) {
          const data = res.data.result
          this.areaForm = {
            id: data.id,
            parentName: parent.name,
            parentCode: parent.code,
            name: data.name,
            shortName: data.shortName,
            areaCode: data.areaCode,
            cityCode: data.cityCode,
            zipCode: data.zipCode,
            lng: data.lng,
            lat: data.lat,
            remark: data.remark
          }
          this.dialogEditVisible = true
        } else {
          this.$notify.error({ title: '查询失败!', message: res.data.message })
        }
      })
    },
    // 加载节点
    loadNode(node, resolve, checkNodes) {
      let parentCode = '0'
      if (node != null && node.data && node.data.code) {
        parentCode = node.data.code
      }
      const parems = { 'parentCode': parentCode, lazyLoad: true }
      console.log(parems)
      getTree(parems).then(res => {
        if (res.data.flag) {
          const data = res.data.result
          if (resolve) {
            resolve(data)
          } else {
            this.treeMenuData = data
          }
        } else {
          this.$notify.error({ title: '查询失败!', message: res.data.message })
        }
      })
    },
    initData() { // 初始化数据
    },
    addDialog(data) {
      this.dialogEditTitle = '新增区域'
      this.areaForm = {
        id: null,
        parentName: data.name,
        parentCode: data.code,
        name: null,
        shortName: null,
        areaCode: null,
        cityCode: null,
        zipCode: null,
        lng: null,
        lat: null,
        remark: null
      }
      this.dialogEditVisible = true
      console.log(data)
    },
    updateDialog(node, data) {
      this.dialogEditTitle = '编辑区域'
      const parent = node.parent.data
      this.findById(data.id, parent)
    },
    valiData() {
      const v1 = this.handleValid('areaForm')
      return Promise.all([v1])
    },
    btnSaveData() {
      this.valiData().then(_ => {
        const params = this.areaForm
        this.setBtnLoading('save', true)
        this.saveData(params).then(_ => {
          this.setBtnLoading('save', false)
          this.dialogEditVisible = false
        })
      })
    },
    saveData(params) {
      this.setBtnLoading('save', true)
      if (!params.id) {
        return create(params).then(res => {
          this.setBtnLoading('save', false)
          if (!res.data.flag) {
            this.$notify.error({ title: '保存异常！', message: res.data.message })
            return
          }
          this.$notify.success({ title: '保存成功！' })
          this.jump2list()
        }).catch(err => {
          this.$notify.error({ title: '保存异常！', message: err.message })
        })
      } else {
        return update(params).then(res => {
          this.setBtnLoading('save', false)
          if (!res.data.flag) {
            this.$notify.error({ title: '修改异常！', message: res.data.message })
            return
          }
          this.$notify.success({ title: '修改成功！' })
          this.jump2list()
        }).catch(err => {
          this.$notify.error({ title: '修改异常！', message: err.message })
        })
      }
    }
  }
}
</script>

<style scoped>
.el-tag {
  white-space: normal;
  height: auto;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
